<template>
	<view class="content">
		<!-- 轮播 -->
		<swiper indicator-dots autoplay :indicator-dots="false" class="swiper">
		  <swiper-item v-for="(item, index) in bannerList" :key="index">
			<image :src="item"></image>
		  </swiper-item>
		</swiper>
		<!-- 开通会员 -->
		<!-- <view class="hdbg">
			<image src="../../static/img/img/hdbg.png" mode=""></image>
		</view> -->
		<!-- 活动列表 -->
		<view class="hdlist">
			<waterfall ref='waterfall' :list='imgArr'></waterfall>
		</view>
	</view>
</template>

<script>
	import waterfall from '@/components/TPlus-waterfall/TPlus-waterfall.vue';
	import { hdList } from '@/api/api.js'
	import config from '@/config'
	export default {
		components: { waterfall },
		data() {
			return {
				imgUrl:config.baseUrl,
				bannerList:[],
				hdlist:[],
				url:config.baseUrl,
				imgArr: [], //  需要再次加载的图片数组
				num:'100',
			}
		},
		onLoad() {
			this.banner();
			this.loadImages(); //首次加载图片
		},
		methods: {
			// 查询活动banner数据
			banner() {
				let data = {
					num:"5"
				}
				hdList(data).then((res) => {
					if(res.code==200){
						this.hdlist = res.data
						for (let i = 0; i < res.data.length; i++) { 
						this.bannerList.push(this.url+res.data[i].image);
						}
					}
				  })
			},
			
			/***
			 * 加载图片
			 */
			loadImages() {
				uni.showLoading({
					title: '加载中'
				});
				//模拟请求数据
				setTimeout(()=>{
					// let arr = []
					// for(let i in [1,2,3,4,5,6,7,8,9,10] ){
					// 	arr.push({name: `图片-${i}` , src:`https://yeke.fedzhfw.cn/uploads/20240515/78098bfcfe5aa7636efc94f8e0a0f0bd.jpg`})
					// }
					// this.imgArr = arr; //需要再次加载的图片数组 （ 会触发imageLoad() ）
					// uni.hideLoading();
					let data = {
						  num :this.num,
						}
					hdList(data).then((res) => {
						if(res.code==200){
							this.imgArr = res.data
							for (let i = 0; i < this.imgArr.length; i++) {
								this.imgArr[i].price = this.imgArr[i].price.replace(/\.00$/, '');
								this.imgArr[i].src = this.imgArr[i].image;
							} 
							console.log('this.imgArr',this.imgArr)
							uni.hideLoading();
						}
					  })
				} ,500)
			
			},
			// 跳转详情页
			toDetails(id) {
				uni.navigateTo({
					url: '../activity/details?id='+id,
				});
			},
			
			// 页面上拉触底事件的处理函数
			onReachBottom: function() {
				this.loadImages();
			}
		},
	}
</script>

<style>
	
	.content{
		background-color: #fff;
	}
	.swiper{
		height: 482rpx;
	}
	
	.swiper image{
		width: 100%;
		height: 100%;
	}
	
	.hdbg{
		width: 100%;
		height: 80px;
		text-align: center;
	}
	
	.hdbg image{
		width: 95%;
		height: 100%;
		border-radius: 5px;
	}
	
	.hdlist{
		margin-top: 20rpx;
	}
	
	.time{
		color: #8e8e8e;
		/* margin-top: -10px; */
		font-weight: 300;
		font-size: 20rpx;
	}
	
	.address{
		color: #8e8e8e;
		margin: 5px 0;
		/* margin-bottom: 5px; */
		font-weight: 300;
		font-size: 20rpx;
		display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  text-overflow: ellipsis;
	}
	
	.hdlist ul{
		padding: 10px;
		display: flex;
	}
	
	.hdlist ul li{
		box-shadow: 1px 1px 10px #c1c1c1;
		margin-bottom: 10px;
		width: 50%;
	}
	
	.hdlist ul li:nth-child(odd){
		margin-right: 20rpx;
	}
	
	.hdlist ul li image{
		width: 100%;
		height: 380rpx;
	}
	
	.hdLeft p{
		font-size: 22rpx;
		color: #aaaaaa;
		font-weight: 300;
	}
	
	.hdLeft button{
		width: 72px;
		font-size: 11px;
		float: right;
		background-color: #6a8473;
		color: #fff;
		position: relative;
		top: -5rpx;
		left: -13rpx;
	}
	
	.hdLeft{
		line-height: 20px;
		padding-left: 5px;
		width: 100%;
	}
	
	.hdLeft h3{
		font-size: 24rpx;
		font-weight: 300;
	}
	
	.btn .price{
		font-size: 15px;
		color: #6a8473;
		font-weight: 400;
	}
	
	.btn{
		margin-top: 10px;
	}
	
	.iconImg{
		width: 16px!important;
		height: 16px!important;
		position: relative;
		top: 3px;
	}
	
	.time{
		color: #8e8e8e;
		/* margin-top: -10px; */
		font-weight: 300;
		font-size: 20rpx;
	}
	
	.price{
		/* font-size: 15px;
		font-weight: 600;
		float: right; */
		color: #698376;
		display: flex;
		float: left;
		font-size: 30rpx;
		font-weight: 300;
	}
	
	.yend{
		height: 100%;
		width: 100%;
		background: rgba(0,0,0,0.6);
		position: absolute;
		top: 0;
		text-align: center;
		line-height: 185px;
	}
	
	.yendImg{
		width: 50px;
		height: 49px;
		position: relative;
		top: 59rpx;
	}
</style>
